<template>
  <div class="hello">

      <!-- elementUI实现 span:按24分  offset栅格左侧的间隔数-->
      <el-container>
          <el-header>
                <el-row :gutter="20">
                    <el-col :span="3"  :offset="1">+发起合同</el-col>
                    <el-col :span="5" :offset="1">公司
                        <!-- 如果项目：下拉选框进行筛选 -->
                    </el-col>
                    <el-col :span="3" :offset="9">下载App</el-col>
                    <el-col :span="2">头像</el-col>
                </el-row>
          </el-header>

          <el-main>

              <!-- tab切换 -->
              <el-tabs v-model="activeTab" >
                  <!-- 这里用slot，自定义一下标签吧~ -->
                  <!-- method没法准确定义的时候，在调用的时候就直接传参， -->
                <el-tab-pane  name="all">
                    <span slot="label">全部文件（ {{ getCount('all') }} ）</span>
                </el-tab-pane>
                <el-tab-pane  name="FILLING">
                    <span slot="label">拟定中（ {{ getCount('FILLING') }} ）</span>
                </el-tab-pane>
                <el-tab-pane  name="COMPLETE">
                    <span slot="label">已完成（ {{ getCount('COMPLETE') }} ）</span>
                </el-tab-pane>
                <el-tab-pane  name="SIGNING">
                    <span slot="label">签署中（ {{ getCount('SIGNING') }} ）</span>
                </el-tab-pane>
                <el-tab-pane  name="DRAFT">
                    <span slot="label">草稿（ {{ getCount('DRAFT') }} ）</span>
                </el-tab-pane>
              </el-tabs>
    
            <!-- 数据表显示 -->
                <table >
                    <tr v-for="item in listReaultTab" v-bind:key="item.id">
                    <td>
                            <el-checkbox 
                                v-model="item.checked">
                            </el-checkbox>
                    </td>
                    <!-- <td>{{ index }}</td> -->
                    <td>{{ item.subject }}</td>
                    <td>{{ item.sn }}</td>
                    <td><el-tag type="success">{{ item.statusDesc }}</el-tag></td>                         
                </tr>

                <!-- 底端删除按钮 -->
                <div class="delete-btn">
                    <el-button 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="delteSome"
                        circle>
                    </el-button>
                        <el-checkbox 
                            @change="checkAllChange">
                        </el-checkbox>
                </div>      
            </table>
          </el-main>

          <el-footer class="foot-location">        
                    <!-- 分页 -->
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :total="50">
                </el-pagination>
            </div>
          </el-footer>
      </el-container>
  </div>
</template>
<script>
import { listDatas } from "../ownJson/listData.js";
export default {
  visible: false,
  name: "HelloWorld",
  data() {
    return {
      // 获取js中存有的json数据中的  result
      listResult: listDatas.result,
      // listReaultTab: [],计算属性比较方便
      value: [],
      activeTab: "all",
      statusDesc: "",
      checkAll: false
    };
  },
//  $set创建一个新的属性，进行维护数据
  created() {
      this.listResult.forEach(item => {
          this.$set(item,'checked',false);
      });
  },
  computed: {
    //  tab切换列表
    listReaultTab() {
      if (this.activeTab == "all") {
        return this.listResult;
      } else {
        return this.listResult.filter(x => {
          return x.status == this.activeTab;
        });
      }
    }
  },

  methods: {
    //   tab上的表单数量获取
    getCount(num) {
      if (num == "all") {
        return this.listResult.length;
      } else {
        return this.listResult.filter(x => {
          return x.status == num;
        }).length;
      }
    },
    // 全选 / 反选
        checkAllChange(statu) {
            console.log( statu );  //测试
            this.listResult.forEach(item => {              
                item.checked = statu;
            });
        },
        // 批量删除
        delteSome() {
            this.listResult = this.listResult.filter(item => {
                     return item.checked == false; 
            })
        }

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  font-size: 12px;
}
body {
  position: relative;
}
.el-header,
.el-footer {
  background-color: skyblue;
  line-height: 70px;
}

/*身为块级元素的table不需要我来给它定义宽度 */
table {
  width: 100%;
}
.delete-btn {
  float: left;
  margin: 20px;
}
tr:hover {
  background-color: #bce8ff;
  opacity: 0.7;
  cursor: pointer;
}
foot-location {
  position: absolute;
  bottom: 0;
}
</style>
